<template>
  <div class="dashboard-container">
    <div class="setContent">
      <div class="title">企业设置</div>
      <div class="butList" @click="addHander">
        <span>+</span> 添加子管理元
      </div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="管理员名称" width="120">
              <template slot-scope="scope">{{ scope.row.userName }}</template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="角色">
              <template slot-scope="scope">
                {{ scope.row.sysRoleAbbr.roleDesc }}
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" @click="editerHander(scope.row)">编辑</span>
                <span class="actLab" @click="delHander(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              v-if="total > pageSize"
              layout="prev, pager, next"
              :total="1000"
            />
          </div>
        </div>
      </div>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="300" center>
        <div class="dialogItem">成员：
          <el-select :value="userName" filterable size="mini" width="255" placeholder="请选择管理员" @change="changeMember">
            <el-option v-for="item in options" :key="item.id" :label="item.username" :value="item" />
          </el-select>
        </div>
        <div class="dialogItem">角色：
          <el-select :value="roleName" filterable size="mini" width="255" placeholder="请选择管理员" @change="changeRole">
            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item" />
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" style="background: #3345ff;border:none;" @click="submitSetAdmin">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  filters: {
    labCol(val) {
      switch (val) {
        case '通讯录管理' :
          return { background: '#ffead4', color: '#a35111' }
        case '工作台管理' :
          return { background: '#ffe5f4', color: '#911a49' }
        case '应用中心管理' :
          return { background: '#d4dfff', color: '#21419c' }
        case '审批' :
          return { background: '#e1f9e4', color: '#0f7253' }
        case '签到' :
          return { background: '#d8f4f8', color: '#176b77' }
        case '考勤打卡' :
          return { background: '#fcfadb', color: '#cc8301' }
        default :
          return { background: '#eeeafc', color: '#2c168d' }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      title: '添加子管理员',
      loading: false,
      tableData: [],
      value: '',
      options: [],
      roleList: [],
      adminListData: [],
      checkList: [],
      roleId: '',
      userId: '',
      userName: '',
      roleName: '',
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.init()
    this.getMemberList()
    this.getRoleList()
    this.getAdminList()
  },
  methods: {
    init() {
      this.$store.dispatch('company/getCompanyChAdminAct', { page: this.page, pageSize: this.pageSize }).then((res) => {
        this.tableData = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addHander() {
      this.value = ''
      this.title = '添加管理员'
      this.dialogVisible = true
    },
    editerHander(row) {
      this.title = '编辑管理员'
      this.value = row.id
      this.userId = row.id
      this.userName = row.userName
      this.roleId = row.sysRoleAbbr.id
      this.roleName = row.sysRoleAbbr.roleDesc
      this.dialogVisible = true
    },
    delHander(row) {
      this.$store.dispatch('company/delCompanyAdminAct', { id: row.id }).then((res) => {
        this.$message.success('删除成功！')
        this.init()
        this.loading = false
      }).catch(() => {
        this.$message.error('数据提交失败！')
        this.loading = false
      })
    },
    submitSetAdmin() {
      if (!this.userId) {
        this.$message.error('请选择成员！')
        return false
      }
      if (!this.roleId) {
        this.$message.error('请选择角色！')
        return false
      }
      this.$store.dispatch('company/setCompanyAdminAct', { userId: this.userId, roleId: this.roleId }).then((res) => {
        this.$message.success(`${this.title}成功！`)
        this.init()
        this.dialogVisible = false
        this.adminListData = res
        this.loading = false
      }).catch(() => {
        this.$message.error(`${this.title}失败！`)
        this.loading = false
      })
    },
    changeMember(val) {
      this.userId = val.id
      this.userName = val.username
    },
    changeRole(val) {
      this.roleId = val.id
      this.roleName = val.roleName
    },
    getAdminList() {
      this.$store.dispatch('company/getCompanyAdminListAct').then((res) => {
        this.adminListData = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getMemberList() {
      this.$store.dispatch('organization/getSimMemberAct', { pageSize: 1000, includeSub: 0 }).then((res) => {
        this.options = res.rows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getRoleList() {
      this.$store.dispatch('company/getCompanyRoleAct', { page: 1, pageSize: 1000 }).then((res) => {
        this.roleList = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
  .setContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#606266;
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .setContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          cursor: pointer;
          color: #3345ff;
          font-size: 14px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
        }
        .cont {
          padding:0 20px;
          .tableCont{
            background: #fff;
          }
          .titlab{
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }
          .actLab{
            color:#3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }
        .itemsLIst{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .items{
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
            .lab{
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color:#fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }
          .items:nth-child(2n-1){
            margin-right: 10px;
          }
        }
        .tit{
           line-height: 50px;
         }
        .dialog-footer{
          display: flex;
          justify-content: center;
          text-align: center;
        }
      }
      .dialogItem{
        margin: 20px 0;
      }
    }
  }
</style>
